<template>
    <div id="status-tag">
        <el-tag
            v-if="code && ['0', '1', '2', '3', '4'].includes(code)"
            :key="types[code].name"
            :color="types[code].color"
            :style="{ color: types[code].fontColor }"
            effect="dark"
            size="mini"
        >
            {{ types[code].name }}
        </el-tag>
        <span v-else>--</span>
    </div>
</template>

<script lang="ts">
import { getConfigItem } from '@/utils/tools';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'StatusTag',
})
export default class StatusTag extends Vue {
    @Prop() code: any;

    types = {
        '0': { name: '合规', color: '#95f204', fontColor: '#333333' },
        '1': { name: '警告', color: '#f59a23', fontColor: '#ffffff' },
        '2': { name: '送审', color: '#ffff00', fontColor: '#333333' },
        '3': { name: '禁止', color: '#d9001b', fontColor: '#ffffff' },
        '4': { name: '错误', color: '#333333', fontColor: '#ffffff' },
    };

    mounted() {
        if (getConfigItem('WEB_DOCKING') == 'CMSCHINA') {
            this.types = {
                '0': { name: '合规', fontColor: '#8bd197', color: '#e7f6ea' },
                '1': { name: '警告', fontColor: '#ff962c', color: '#fff1e3' },
                '2': { name: '送审', fontColor: '#1d80ff', color: '#e1edff' },
                '3': { name: '禁止', fontColor: '#df3a39', color: '#fceeee' },
                '4': { name: '错误', fontColor: '#6d5d5b', color: '#efefef' },
            };
        }
    }
}
</script>

<style lang="scss" scoped>
#status-tag {
    display: inline-block;
    & /deep/ .el-tag--blue {
        border-color: transparent;
    }
}
</style>
